<template>
    <u-popup v-model="value" mode="right" width="100%">
        <view class="card-header">
            <view class="card-header-wrap">
                <view
                    class="card-header-bar"
                    :style="{ height: statusBarHeight + 'px' }"
                ></view>
                <view
                    class="u-relative u-flex u-row-center u-border-bottom"
                    :style="[{ height: navbarHeight + 'px' }]"
                >
                    <u-icon
                        @click="$u.debounce(close, 500)"
                        name="close"
                        class="u-absolute"
                        :style="[headerStatusCloseIconStyle]"
                    ></u-icon>
                </view>
            </view>
            <view
                class="card-header-placeholder"
                :style="{
                    height: Number(navbarHeight) + statusBarHeight + 'px',
                }"
            ></view>
        </view>
        <view class="card-body">
            <view class="card-title">
                {{ title }}
            </view>
            <view class="card-notice u-flex">
                <view class="notice-lalbel">注：</view>
                <view class="notice-item u-flex">
                    <view class="block correct"></view>
                    <view class="text">正确</view>
                </view>
                <view class="notice-item u-flex">
                    <view class="block error"></view>
                    <view class="text">错误</view>
                </view>
                <view class="notice-item u-flex">
                    <view class="block"></view>
                    <view class="text">未作答</view>
                </view>
                <view class="notice-item u-flex">
                    <view class="block ban"></view>
                    <view class="text">主观题</view>
                </view>
            </view>
            <view
                class="card-topic"
                v-for="(topic, index) in examRulesList"
                :key="index"
            >
                <view class="topic-title">{{ topic.title }}</view>
                <view class="topic-list u-flex u-flex-wrap">
                    <view
                        class="topic-item"
                        :class="[
                            {
                                current: topicId == item.topic_id,
                            },
                            topicStyle(item),
                        ]"
                        v-for="item in topic.value"
                        :key="item.topic_id"
                        @click="change(currentTopicIndex(item.topic_id))"
                    >
                        {{ currentTopicIndex(item.topic_id) + 1 }}
                    </view>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
    props: {
        /**
         * 显示状态
         */
        value: {
            type: Boolean,
            default: false,
        },
        /**
         * 开始标题
         */
        title: {
            type: String,
            default: "",
        },
        // 禁止
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    computed: {
        ...mapState({
            examIndex: (state) => state.examination.examIndex,
            examList: (state) => state.examination.examList,
            examRulesList: (state) => state.examination.examRulesList,
        }),
        ...mapGetters({
            statusBarHeight: "projectSetting/globStatusBarHeight",
            navbarHeight: "projectSetting/globNavbarHeight",
            globPrimaryColor: "designSetting/getGlobThemeColor",

            topicId: "examination/getTopicId",
        }),
        headerStatusCloseIconStyle() {
            let style = {
                left: "15px",
                top: "15px",
            };
            return style;
        },
    },
    methods: {
        close() {
            this.$emit("input", false);
        },
        change(index) {
            if (index != this.examIndex) {
                this.$emit("change", index);
            }
        },
        // 试题的号
        currentTopicIndex(id) {
            let num = this.examList.findIndex((item) => item.topic_id == id);
            return num;
        },
        topicStyle(item) {
            if (item.subjective == 1) {
                return "ban";
            } else {
                if (!item.answered) {
                    return "default";
                } else if (item.answer_right) {
                    return "correct";
                } else if (!item.answer_right) {
                    return "error";
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.card-header {
    .card-header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
    }
    .card-header-bar {
        width: 100%;
    }
    .card-header-placeholder {
        width: 100%;
    }
}
.card-body {
    margin: 30rpx 0;

    .card-title {
        padding: 0 30rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
    }

    .card-notice {
        padding: 0 30rpx;
        margin-top: 25rpx;
        .notice-lalbel {
            font-size: 26rpx;
            color: #909399;
        }
        .notice-item {
            margin-right: 30rpx;
            .block {
                width: 28rpx;
                height: 28rpx;
                border-radius: 4rpx;
                border: 1px solid #dcdfe6;
            }
            .text {
                font-size: 26rpx;
                color: #303133;
                margin-left: 10rpx;
            }
            .correct {
                color: #67c23a;
                border-color: #67c23a;
            }
            .error {
                color: #f54030;
                border-color: #f54030;
            }
            .ban {
                border-color: #dcdfe6;
                background-color: #f0f0f2;
            }
        }
    }
    .card-topic {
        margin-top: 40rpx;
        .topic-title {
            padding: 0 30rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #303133;
        }
        .topic-list {
            padding-left: 30rpx;
        }
        .topic-item {
            width: 72rpx;
            height: 72rpx;
            color: #303133;
            font-size: 28rpx;
            border-radius: 8rpx;
            border-width: 1rpx;
            border-style: solid;
            border-color: #dcdfe6;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30rpx;
            margin-right: 30rpx;
            &.correct {
                border-color: #67c23a;
            }
            &.error {
                border-color: #f54030;
            }
            &.ban {
                border-color: #dcdfe6;
                background-color: #f0f0f2;
            }
            &.current {
                @include text-color;
                @include border-color;
                @include bg-color-disabled;
            }
        }
    }
}
</style>
